<template>
	<view  class="h-full">
		<view :style="{paddingTop:`${top}px`,backgroundColor:headerBg}"></view>
		<view :style="{height:`calc(100vh - ${top + bottom}px)`}" :class="[scroll?'scroll':'hidden']">
			<slot></slot>
		</view>
		<view :style="{paddingBottom:`${bottom}px`,backgroundColor:footerBg}"></view>
	</view>
</template>

<script lang="ts" setup>
interface Props {
	headerBg?: string
	footerBg?: string
	scroll?: boolean
}	
import {safeAreaInsets} from "@/utils"
import {ref,defineProps,withDefaults} from "vue"
const top = ref(safeAreaInsets.top || 0);
const bottom = ref(safeAreaInsets.bottom || 0);
withDefaults(defineProps<Props>(),{
	headerBg: 'transparent',
	footerBg: 'transparent',
	scroll: false
})
</script>

<style lang="scss" scoped>
.h-full{
	height: 100%;
}
.scroll{
	overflow-y: scroll;
}
.hidden{
	overflow-y: hidden;
}
</style>